﻿import React, { Component } from 'react';
import PropTypes from 'prop-types';
import msgName from './msgTypeName';
import CategoryHeader from './CategoryHeader'
import Detail from './Detail'


export default class SentCategory extends Component {
    static propTypes = {
        category: PropTypes.object,
        move2pre: PropTypes.func.isRequired,
        move2next: PropTypes.func.isRequired,
        selectRow: PropTypes.func.isRequired
    }
    render() {
        if (!this.props.category) return null;
        const { title, pageCount, currentPage, headers, rowset, currentRow } = this.props.category;
        return (
            <div className='his-cat-container'>
                <CategoryHeader
                    title={title}
                    pageCount={pageCount}
                    currentPage={currentPage}
                    move2pre={this.props.move2pre}
                    move2next={this.props.move2next}
                />
                <div>
                    <table className='his-table his-head-table'>
                        <colgroup>
                            <col style={{ 'width': '200px' }} />
                            <col style={{ "width": "170px" }} />
                            <col style={{ "width": "50px" }} />
                            <col style={{ "width": "50%" }} />
                            <col style={{ "width": "50%" }} />
                        </colgroup>
                        <thead>
                            <tr>
                                {headers.map((h, idx) => <th key={idx}>{h}</th>)}
                            </tr>
                        </thead>
                    </table>
                </div>
                <div>
                    <table className='his-table his-cnt-table' >
                        <colgroup>
                            <col style={{ 'width': '200px' }} />
                            <col style={{ "width": "170px" }} />
                            <col style={{ "width": "50px" }} />
                            <col style={{ "width": "50%" }} />
                            <col style={{ "width": "50%" }} />
                        </colgroup>
                        {rowset && rowset.map((row, idx) => (
                            <tbody>
                                <tr key={idx}
                                    className={row === currentRow ? 'his-curr-row' : ''}
                                    onClick={() => this.props.selectRow('sent', row)}>
                                    <td>{row[0]}</td>
                                    <td className='his-cell-center'>{row[1].substring(0, 19).replace('T',' ')}</td>
                                    <td className='his-cell-center'>{msgName(row[2])}</td>
                                    <td className='his-msg-content'>{row[3]}</td>
                                    <td className='his-msg-receivers'>{row[4]}</td>
                                </tr>
                                {row === currentRow &&
                                    <tr className='his-detail-row'>
                                        <td colSpan="5">
                                            <Detail msg={row[3]} receivers={row[4]} />
                                        </td>
                                    </tr>
                                }
                            </tbody>)
                        )}
                    </table>
                </div>
            </div>
        )
    }
}